<template>
  <div class="data-topList flex mt-10">
    <!-- 设备概览 -->
    <el-card class="box-card box1">
      <template #header>
        <div class="card-header">
          <p class="f14">
            <span class="card-text">设备概览</span>
            <i class="iconfont icon-wenhao"></i>
          </p>
          <el-button class="button blue" text>绑定设备</el-button>
        </div>
      </template>
      <div class="flex aic box-buttom">
        <img
          class="img"
          src="	http://nongye.huruqing.cn/img/gateway.5aeeb219.png"
          alt=""
        />
        <li class="flex fdc aic jc-c">
          <span>{{ LoRaWANTotal }}</span>
          <p>LoRaWAN</p>
          <P>网管</P>
        </li>
        <li class="flex fdc aic jc-c">
          <span>{{ LoRaPPTotal }}</span>
          <p>LoRaWPP</p>
          <P>网关</P>
        </li>
        <li class="flex fdc aic jc-c">
          <span>{{ group }}</span>
          <P>群组</P>
        </li>
        <li class="flex aic last">
          <i
            class="icon iconfont icon-yalichuanganqi f999"
          ></i>
          <p class="flex fdc aic">
            <strong>{{ sensorTotal }}</strong>
            <span>传感器节点</span>
          </p>
        </li>
      </div>
    </el-card>
    <!-- 监控 -->
    <el-card class="box2 box-card mr-10 ml-10">
      <template #header>
        <div class="card-header">
          <p class="f14">
            <span class="card-text">监控</span>
            <i class="iconfont icon-wenhao"></i>
          </p>
        </div>
      </template>
      <div>
        <p class="flex jc-sb f14">
          <span>网管离线</span>
          <span class="line">{{ offlineTotal }}</span>
        </p>
        <p class="flex jc-sb f14 mt-10">
          <span>节点离线</span>
          <span class="line">{{ offline }}</span>
        </p>
        <p class="flex jc-sb f14 mt-10">
          <span>传感器低电量</span>
          <span class="line3">{{ lowBattery }}</span>
        </p>
      </div>
    </el-card>
    
  </div>
</template>
  
  <script setup>
import { defineProps } from "vue";
defineProps({
  LoRaWANTotal: Number,
  LoRaPPTotal: Number,
  group: Number,
  sensorTotal: Number,
  lowBattery: Number,
  offline: Number,
  offlineTotal: Number,
});
</script>
  
  <style>
</style>